<template>
  <div>
    <div class="ny_view">
      <div class="ny_news_nav">
        <!--news_btn news_on -->
        <a href="javascript:void(0)" v-for="(item,index) in newTypeList" :key="index" @click="handleChange(index)"
           :class="index == queryInfo.currentValue ? 'news_btn news_on ' : 'news_btn' ">{{ item }}</a>
      </div>
      <div class="ny_news_lists">
        <div class="row ny_news_cell" v-for="(c_item,c_index) in articleList" :key="c_index">
          <div class="col-sm-3 hidden-xs">
            <a class="thumbnail" href="javascript:void(0)" @click="dynamicDetail(c_item.id)"><img :src="c_item.img" style="height: 150px"></a>
          </div>
          <div class="col-sm-9">
            <a href="javascript:void(0)" @click="dynamicDetail(c_item.id)">
              <h3 class="ny_news_title">{{c_item.title}}</h3>
              <div class="ny_news_desc">{{c_item.description}}</div>
              <div class="ny_news_time">
                {{c_item.create_time | formatTimer }}
                <span class="ny_news_btn" @click="dynamicDetail(c_item.id)">查看详情>>></span>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div id="ny_news_page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 30, 40,50]"
          :page-size="queryInfo.limit"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data(){
    return{
      newTypeList: [],
      queryInfo: {
        limit: 10,
        page: 1,
        currentValue: 1,
      },
      total:0,
      articleList:[]
    }
  },
  created () {
    this.queryInfo.currentValue = this.getContextData('currentValue') || 1
    this.queryInfo.page = this.getContextData('session_page') || 1
    this.getArticleType()
    this.handleChange(this.queryInfo.currentValue)
  },
  //过滤器
  filters: {
    formatTimer: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      let h = date.getHours()
      h = h < 10 ? '0' + h : h
      let m = date.getMinutes()
      m = m < 10 ? '0' + m : m
      let s = date.getSeconds()
      s = s < 10 ? '0' + s : s
      return y + '-' + MM + '-' + d
    }
  },
  methods:{
    //获取新闻类别
    async getArticleType () {
      const {data: res} = await this.$http.get('home/article_type_list')
      if (res.code !== 200) return false
      this.newTypeList = res.data.list
    },
    async handleChange (index) {
      this.queryInfo.currentValue = index
      this.setContextData("currentValue", index);
      const {data: res} = await this.$http.get('home/article_list', {params: this.queryInfo})
      if (res.code !== 200) return false
      this.articleList = res.data.list
      this.total = res.data.totalCount
    },
    handleSizeChange (newSize) {
      this.queryInfo.limit = newSize
      this.handleChange(this.queryInfo.currentValue)
    },
    //给sessionStorage存值，解决刷新回到第一页的问题
    setContextData(key, value) {
      if (typeof value == "string") {
        sessionStorage.setItem(key, value);
      } else {
        sessionStorage.setItem(key, JSON.stringify(value));
      }
    },
    //从sessionStorage取值
    getContextData(key) {
      const str = sessionStorage.getItem(key);
      if (typeof str == 'string') {
        try {
          return JSON.parse(str);
        } catch (e) {
          return str;
        }
      }
      return;
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.setContextData("session_page", newPage);
      this.handleChange(this.queryInfo.currentValue)
    },
    dynamicDetail(id){
      this.$emit('callbackNew', {
        function: 'getNewDetail',
        data: id
      })
    }
  }
}
</script>

<style scoped>

</style>
